<template>
  <div class="upload-file px-3">
    <el-upload ref="uploadRef" v-model:file-list="uploadFileData.fileLists" :auto-upload="false" :accept="uploadFileData.fileType.join(',')" :limit="uploadFileData.limit" :on-change="handlechange" :drag="drag || (drag === '')" v-bind="$attrs">
      <el-button v-if="!drag && (drag !== '')" size="small" :disabled="uploadFileData.disabled || uploadDisabled">上传文件</el-button>
      <div v-if="drag || (drag === '')" class="el-upload__text">
        将文件拖拽至此处，或
        <em>
          <el-icon class="el-icon--upload !mb-0 align-middle" size="16" style="color: var(--el-color-primary)">
            <upload-filled />
          </el-icon>
          点击上传
        </em>
      </div>
      <template #tip v-if="uploadFileData.showTip">
        <!-- 上传提示 -->
        <div class="el-upload__tip">
          请上传
          <template v-if="uploadFileData.fileSize">
            大小不超过 <b style="color: #f56c6c">{{ uploadFileData.fileSize }}MB</b>
          </template>
          <template v-if="uploadFileData.limit">
            数量不超过 <b style="color: #f56c6c;">{{ uploadFileData.limit }}</b> 个
          </template>
          <template v-if="uploadFileData.fileType.length">
            格式为 <b style="color: #f56c6c;">{{ uploadFileData.fileType.join(" / ") }}</b>
          </template>
          的文件
        </div>
      </template>
    </el-upload>
  </div>
</template>
<script setup lang="ts">
import { ComponentInternalInstance, PropType, useAttrs } from 'vue';
import { UpLoadFileDataProps } from './types';
import { UploadFile, UploadInstance } from 'element-plus';
const props = defineProps({
  uploadFileData: {
    type: Object as PropType<UpLoadFileDataProps>,
    required: true,
  },
  drag: {
    type: [String, Boolean],
    default: false,
  }
});
let { uploadFileData } = toRefs(props);
const attrs = useAttrs();
console.log(attrs);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const uploadRef = ref<UploadInstance>();
const handlechange = (uploadFile: UploadFile) => {
  console.log(uploadFile);
  if (uploadFile.status !== 'ready') return;
  // 校检文件大小
  if (uploadFileData.value.fileSize) {
    const isOverLimit = uploadFile.size! / 1024 / 1024 > uploadFileData.value.fileSize;
    if (isOverLimit) {
      uploadRef.value?.handleRemove(uploadFile);
      return proxy?.$modal.msgWarning(`上传文件大小不能超过 ${uploadFileData.value.fileSize} MB!`);
    };
  };
};

//是否已经超过了限制
const uploadDisabled = computed(() => {
  if (!uploadFileData.value.limit) {
    return false;
  } else {
    return uploadFileData.value.fileLists.length >= props.uploadFileData.limit;
  }
});
defineExpose({
  uploadRef
});
</script>
<style scoped lang="scss">
.upload-file {
  width: 100%;

  .el-upload__tip {
    line-height: normal;
    margin-top: 0;
  }

  :deep(.el-upload-list) {
    flex: 1;
    margin-top: 2px;

    .el-upload-list__item {
      border: 1px solid #e4e7ed;
      line-height: 2;
      margin-bottom: 5px;
      position: relative;
    }
  }
  :deep(.el-upload) {
    margin: 8px 0;
    .el-upload-dragger {
      padding: 12px 8px;
    }
  }
}
</style>
